<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var num = 1;
        function demo() {
            console.log(num);
            function demoSon() {
                num = 3;
            }
            var num = 2
            demoSon();
        }
        demo();
        // 1.执行代码前先预解析代码，此时代码就是：
        //         var num
        //         num=1
        //         function demo(){
        //        console.log(num);
        //        function demoSon(){
        //            num = 3;
        //        }
        //        var num = 2
        //        demoSon();
        //    }
        //    demo()
        // 2. 开始执行代码，从函数调用开始，执行demo(),转入demo函数。
        // 3. demo函数再次预解析代码,此时函数内代码如下：
        // function demo() {
        //     var num;
        //     function demoSon() {
        //         num = 3;
        //     }
        //     console.log(num);
        //     num = 2;
        //    demoson()
        // }
        //  4. 开始执行代码,从上到下,demoSon在打印之前只声明未调用所以不执行,此时打印num，采用就近原则，函数内声明了一个num，但是打印之前并未赋值,所以结果为undefined。


    </script>
</head>

<body>

</body>

</html>